<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>API 文档</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Microsoft YaHei', Arial, sans-serif;
    }

    body {
      background-color: #f0f2f5;
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }

    .header {
      background-color: #2d8cf0;
      color: white;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      font-size: 24px;
      font-weight: bold;
      text-decoration: none;
      color: inherit;
    }

    .nav {
      display: flex;
      gap: 20px;
    }

    .nav a {
      color: white;
      text-decoration: none;
      padding: 10px;
      transition: all 0.3s;
    }

    .nav a:hover {
      background-color: rgba(255,255,255,0.2);
      border-radius: 4px;
    }

    /* 新增文档样式 */
    .doc-container {
      display: flex;
      gap: 20px;
      padding: 20px;
      flex-grow: 1;
    }

    .sidebar {
      width: 25%;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .main-content {
      flex-grow: 1;
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .api-group {
      padding: 15px;
      border-bottom: 1px solid #eee;
      cursor: pointer;
    }

    .api-group:hover {
      background-color: #f8f9fa;
    }

    .api-method {
      padding: 10px 15px;
      margin-left: 20px;
      border-left: 3px solid #2d8cf0;
    }

    .api-method:hover {
      background-color: #f8f9fa;
    }

    .endpoint {
      margin: 20px 0;
    }

    .endpoint h3 {
      color: #2d8cf0;
      margin-bottom: 10px;
    }

    .parameter-table {
      width: 100%;
      border-collapse: collapse;
      margin: 15px 0;
    }

    .parameter-table th,
    .parameter-table td {
      padding: 10px;
      border: 1px solid #ddd;
      text-align: left;
    }

    .parameter-table th {
      background-color: #f8f9fa;
    }

    .response-example {
      background-color: #f8f9fa;
      padding: 15px;
      border-radius: 4px;
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
<header class="header">
  <a href="/" class="logo">AI 文档中心</a>
  <nav class="nav">
    <a href="/index.html">首页</a>
    <a href="#">动态</a>
    <a href="#">游戏</a>
    <a href="#">空间</a>
    <a href="#">市场</a>
  </nav>
</header>

<div class="doc-container">
  <div class="sidebar">
    <!-- 动态生成模块列表 -->
  </div>

  <div class="main-content">
    <!-- 动态生成接口信息 -->
  </div>
</div>

<script>
  // 从后端获取API信息
  fetch('/api/info')
          .then(response => response.json())
          .then(data => {
            const sidebar = document.querySelector('.sidebar');
            const mainContent = document.querySelector('.main-content');

            const sections = {};

            data.forEach(api => {
              const section = api.section;
              if (!sections[section]) {
                const sectionDiv = document.createElement('div');
                sectionDiv.textContent = section;
                sidebar.appendChild(sectionDiv);

                const mainSectionDiv = document.createElement('div');
                mainSectionDiv.id = section;
                mainSectionDiv.style.display = 'none';
                mainContent.appendChild(mainSectionDiv);

                sections[section] = mainSectionDiv;
              }

              const apiDiv = document.createElement('div');
              apiDiv.innerHTML = `
                        <h2>${api.name}</h2>
                        <p>方法: ${api.method}</p>
                        <p>路径: ${api.path}</p>
                        <h3>请求参数</h3>
                        <ul>
                            ${api.parameters.map(param => `
                                <li>
                                    名称: ${param.name}, 类型: ${param.type},
                                    是否必填: ${param.required ? '是' : '否'}, 描述: ${param.description}
                                </li>
                            `).join('')}
                        </ul>
                    `;
              sections[section].appendChild(apiDiv);
            });

            // 处理侧边栏点击事件
            sidebar.querySelectorAll('div').forEach(sectionDiv => {
              sectionDiv.addEventListener('click', () => {
                const sectionId = sectionDiv.textContent;
                Object.values(sections).forEach(div => {
                  div.style.display = 'none';
                });
                sections[sectionId].style.display = 'block';
              });
            });
          });
</script>
</body>
</html>